<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>CSS Cookbook: columns with flexbox</title>

    <link rel="stylesheet" href="styles.css" />

    <style>
      .container {
        border: 2px solid rgb(75 70 74);
        border-radius: 0.5em;
        padding: 20px 10px;
      }

      .container > * {
        padding: 10px;
        border: 2px solid rgb(95 97 110);
        border-radius: 0.5em;
      }
    </style>

    <style class="editable">
      .container {
        display: flex;
      }

      .container > * {
        margin: 0 10px;
        flex: 1;
      }
    </style>
  </head>

  <body>
    <section class="preview">
      <div class="container">
        <p>
          Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
          onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
        </p>

        <p>
          Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
          courgette tatsoi pea sprouts fava bean collard greens dandelion okra
          wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
        </p>

        <p>
          Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
          kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
          winter purslane kale. Celery potato scallion desert raisin horseradish
          spinach carrot soko.
        </p>
      </div>
    </section>

    <textarea class="playable playable-css">
.container {
  display: flex;
}

.container>* {
  margin: 0 10px;
  flex: 1;
}</textarea
    >

    <textarea class="playable playable-html">
<div class="container">
  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
  melon azuki bean garlic.</p>
  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
  greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
  <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
      daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
        carrot soko. Lotus root water spinach.</p>
</div></textarea
    >

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="playable.js"></script>
</html>
